<template>
  <el-form
   :model="getParams" 
   label-width="120px" 
   ref="newCourse"
   :rules="rules"
   status-icon
   >
    <el-form-item label="课程名称" prop="name">
      <el-input v-model="getParams.name" placeholder="请输入"/>
    </el-form-item>
    <!-- 上传图片拆分出去，单独用组件，在用父向子，和子向父传递数据 -->
    <el-form-item label="课程封面" prop="pic">
      <Upload @getPic="picData"/>
    </el-form-item>
    <el-form-item label="课程状态" prop="state">
      <el-switch
        v-model="getParams.state"
        class="mb-2"
        active-value="1"
        inactive-value="0"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        active-text="上架"
        inactive-text="下架"
      />
    </el-form-item>
    <el-form-item label="课程价格" prop="price">
      <el-input v-model="getParams.price" placeholder="请输入价格"/>
    </el-form-item>
    <el-form-item label="课程简介" prop="brief">
      <el-input
        v-model="getParams.brief"
        :rows="2"
        type="textarea"
        placeholder="请输入对课程的建议"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="addcoures">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, } from 'vue'
import { addCourse } from '@a/index'
import Upload  from '@c/Upload.vue'
import { ElMessage } from 'element-plus';
import router from '@/router';

// 定义表格实例状态
const getParams = reactive({
  name: '',
  pic: '',
  state: '',
  price: '',
  brief: '',
  duce: '',
})

// 上传图片
const picData = (val: string) => {
  getParams.pic = val;
};
// 表单验证规则
const rules = ref({
  name: [
    {
      required: true,
      message: '分类名必填'
    }
  ],
  // pic: [
  //   {
  //     required: true,
  //     message: '请上传一张图片'
  //   }
  // ],
  state: [
    {
      required: true,
      message: '请选择状态'
    }
  ],
  price: [
    {
      required: true,
      message: '价格必填'
    },
    { 
      pattern: 	/[0-9]+/ ,
      message: '请输入价格' 
    }
  ],
  brief: [
    {
      required: true,
      message: '课程介绍必填'
    }
  ],
  duce: [
    {
      required: true,
      message: '讲师介绍必填'
    }
  ],
})

// 表格实例
const newCourse = ref(null)
// 提交表单
let formRef: any = null;
onMounted(() => {
  formRef = newCourse.value
})
const addcoures = () => {
  if (formRef) {
    formRef.validate().then(() => {
      addCourse(getParams).then((res) => {
        if (res.data.code === 200){
          ElMessage({
            message: '添加成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              router.push('/carecourse')
            }
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        message: '表单验证失败重新填写',
        type:'error',
        duration: 1000
      })
    })
  }
}

//重置表单
const reset = () => {
  if (formRef) {
    formRef.resetFields()
  }
} 
</script>

<style scoped lang="scss">
.ctitle{
  // height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2{
    font-size: 14px;
  }
  
  .but{
    width: 60px;
    height: 30px;
    color: #fff;
    border: #38A28A;
    cursor: pointer;
    background-color: #38A28A;
  }
}
.el-form{
  padding: 20px 30px;
  background-color: #fff;

  h2{
    font-size: 18px;
    margin-bottom: 20px;
 }

 .el-input{
    width: 400px;
   }
  .el-textarea{
    width: 400px;
  }
}
</style>